<template>
  <div class="user-info">
    <UserInfoEdit ref="userInfoEdit" v-if="editChecked" :user-info="userInfo"></UserInfoEdit>
    <UserInfoDesc v-else :user-info="userInfo"></UserInfoDesc>
    <div class="user-info__btn">
      <template v-if="editChecked">
        <a-button type="primary" @click="handleSave" :loading="loading">{{ $t('all.autotext321') }}</a-button>
        <a-button @click="cancelEdit">{{ $t('all.autotext975') }}</a-button>
      </template>
      <a-button
        v-else
        type="primary"
        key="edit"
        @click="handleEdit"
      >
        {{ $t('all.autotext629') }}
      </a-button>
      <a-button type="danger" @click="handelDelete" key="delete">{{ $t('all.autotext965') }}</a-button>
    </div>
  </div>
</template>

<script>
import { cancellation, getUserDetail, updateUser } from '@api/account/settings'
import UserInfoDesc from '@views/account/settings/components/UserInfoDesc.vue'
import UserInfoEdit from '@views/account/settings/components/UserInfoEdit.vue'

export default {
  name: 'UserInfo',
  components: { UserInfoEdit, UserInfoDesc },
  data () {
    return {
      userInfo: {},
      editChecked: false,
      loading: false
    }
  },
  created () {
    this.getUserDetail()
  },
  methods: {
    getUserDetail () {
      return getUserDetail().then(res => {
        this.userInfo = res
      })
    },
    handelDelete () {
      const that = this
      this.$confirm({
        title: this.$t('all.autotext730'),
        content: this.$t('all.autotext808'),
        onOk () {
          cancellation().then(() => {
            that.$message.success(that.$t('all.autotext1455'))
            that.$store.dispatch('Logout', 1).then(() => {
              that.$router.push({ name: 'login' })
            })
          })
        }
      })
    },
    handleEdit () {
      this.editChecked = true
    },
    handleSave () {
      const formRef = this.$refs.userInfoEdit?.$refs.form
      const formData = this.$refs.userInfoEdit.getFormData()
      if (!formRef) return
      formRef.validate(valid => {
        if (valid) {
          this.loading = true
          // 走接口提交表单
          const { id, account, userName, name, email, phone, idCard, birthday, headimg } = formData
          const commitData = { id, account, userName, name, email, phone, idCard, birthday, headimg }

          return updateUser(commitData)
            .then(() => {
              this.$message.success(this.$t('all.autotext181'))
              this.getUserDetail()
              this.editChecked = !this.editChecked
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    cancelEdit () {
      this.editChecked = false
    }
  }
}
</script>

<style scoped lang='less'>
.user-info {
  border-radius: 8px;
  background: #fff;
  padding: 32px 20px;
  position: relative;
  .user-info__btn {
    position: absolute;
    top: 32px;
    right: 20px;
    .ant-btn {
      &:not(:last-of-type) {
        margin-right: 16px;
      }
    }
  }
}

</style>
